<template>
  <echarts-view :options="option" theme="walden" height="150px" style="position: relative;top: 24px;"></echarts-view>
</template>

<script>
import echartsView from '@/components/ECharts'
import 'echarts-liquidfill'

export default {
  props: {
    propsData: {
      type: String,
      default: '0'
    },
    extremely: {
      type: Boolean,
      default: false
    }
  },
  components: {
    echartsView
  },
  data () {
    return {
      option: {
        series: [
          {
            type: 'liquidFill',
            radius: '90%',
            center: ['50%', '50%'],
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#446bf5'
                  },
                  {
                    offset: 1,
                    color: '#2ca3e2'
                  }
                ],
                globalCoord: false
              }
            ],
            data: [this.propsData, this.propsData], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: 'RGBA(51, 66, 127, 0.7)'
            },
            label: {
              normal: {
                formatter: `${(this.propsData * (this.extremely ? 10000 : 100)).toFixed(2)}${this.extremely ? '‱' : '%'}`,
                textStyle: {
                  fontSize: 20,
                  color: '#fff'
                }
              }
            },
            outline: {
              show: false
              // borderDistance: 0,
              // itemStyle: {
              //   borderWidth: 2,
              //   borderColor: '#112165'
              // }
            }
          }
        ]
      }
    }
  }
}
</script>

<style>

</style>
